<template>
  <!-- 离开时间 -->

  <u-datetime-picker
    v-show="!isdisabled"
    @close="outPicker = false"
    @cancel="outPicker = false"
    @confirm="outConfirm"
    :show="outPicker"
    v-model="outTime"
    mode="datetime"
  />

  <view class="AskApply_container">
    <fl-navBar
      dark
      :border="false"
      title="车辆登记"
      color="#333333"
      :fixed="true"
      left-icon="left"
      background-color="#fff"
      status-bar
    />
    <view class="forms">
      <uni-forms
        :rules="rules"
        label-width="120px"
        label-position="top"
        ref="customForm"
        :modelValue="form"
      >
        <uni-forms-item label="来访车辆牌照" required name="carId">
          <uni-easyinput
            :clearable="false"
            v-model="form.carId"
            placeholder="请输入来访车辆牌照"
          />
        </uni-forms-item>
        <uni-forms-item label="来访单位">
          <uni-easyinput
            :clearable="false"
            v-model="form.visitor"
            placeholder="请输入来访单位"
          />
        </uni-forms-item>
        <uni-forms-item label="联系电话">
          <uni-easyinput
            :clearable="false"
            v-model="form.contractsPhone"
            placeholder="请输入联系电话"
          />
        </uni-forms-item>
        <uni-forms-item label="来访时间" name="visitingTime" required>
          <uni-datetime-picker
            :clear-icon="false"
            type="datetime"
            v-model="form.visitingTime"
          />
        </uni-forms-item>
        <uni-forms-item label="拜访人">
          <uni-easyinput
            :clearable="false"
            v-model="form.interviewee"
            placeholder="请输入拜访人"
          />
        </uni-forms-item>
      </uni-forms>
    </view>
    <view
      class="footerSubmit confire"
      v-if="form.status === '1' && user.userId === form.createUserId"
    >
      <view @tap="handleDelete" class="qd nopass">删 除</view>
      <view @tap="submit" class="qd"> 编 辑 </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, watch } from "vue";
import modal from "@/plugins/modal";
// import { removeZero } from '@/utils/common'
import { formatTimestamp } from "@/utils/common";
import { deleteManage, reportAdd, revokeManage, manageEdit } from "@/api/http";
import { carListDetail, carExamineRemove, carEdit } from "@/api/carRegistration/index";
import { onLoad } from "@dcloudio/uni-app";
import { navigateBack } from "@/utils/ruoyi";
import { checkPermi } from "@/utils/permission";
import store from "@/store";
const { safeAreaInsets } = uni.getSystemInfoSync();
const { user } = store.getters;
const form = ref({
  carId: "",
  contractsPhone: "",
  interviewee: "",
  visitingTime: "",
  visitor: "",
});
const customForm = ref();
const outTime = ref(new Date().getTime());
const outPicker = ref(false);
const isdisabled = ref(false);
const rules = {
  carId: {
    rules: [
      {
        required: true,
        errorMessage: " ",
      },
    ],
  },
  visitingTime: {
    rules: [
      {
        trigger: "change",
        required: true,
        errorMessage: " ",
      },
    ],
  },
};
// watch(
//   () => props.detailData,
//   (newV) => {
//     handleDetailData(newV);
//   },
//   { deep: true }
// );

const handleDelete = async () => {
  const res = await modal.confirm("您确定要删除?");
  if (res) {
    await carExamineRemove(form.value.id);
    modal.msgSuccess("操作成功");
    uni.$emit("load");
    setTimeout(() => {
      navigateBack();
    }, 500);
  }
};
// const proCommon = () => {
//   modal.msgSuccess("操作成功");
//   setTimeout(() => {
//     uni.$emit("loadList");
//     navBack();
//   }, 1000);
// };
const handleRemoke = async () => {
  const res = await modal.confirm(
    `确定撤销报备人为“${form.value.reporterName}”的数据项?`
  );
  if (res) {
    await revokeManage(form.value.id);
    proCommon();
  }
};

onLoad(async (options) => {
  if (options.id) {
    getDetail(options.id);
  }
});
async function getDetail(id) {
  const res = await carListDetail(id);
  form.value = { ...res.data };
}

async function submit() {
  customForm.value
    .validate()
    .then(async (res) => {
      await carEdit({ ...form.value });
      modal.msgSuccess("操作成功");
      uni.$emit("load");
      setTimeout(() => {
        navigateBack();
      }, 500);
    })
    .catch((err) => {
      console.log(err);
    });
}
</script>

<style scoped lang="scss">
.textarea {
  font-size: 30rpx;
  padding-top: 20rpx;
  color: #333333;
}

.areaInput {
  text-align: right;
  font-size: 28rpx;
  color: #333333;
}

.AskApply_container {
  display: flex;
  flex-direction: column;
  height: 100%;

  .forms {
    flex: 1;
    height: 100%;
    width: 90%;
    margin: 0 auto;
    overflow-y: scroll;
    padding: 0rpx 0 0rpx;
  }
  .footerSubmit {
    width: 95%;
    margin: 0 auto;
    height: 100rpx;
  }

  .cell {
    display: flex;
    justify-content: space-between;
    padding: 25rpx 10rpx;
    border-bottom: 2rpx solid #d6dbe3;
    font-size: 28rpx;
    color: #333333;

    .noedit {
      color: #333333 !important;
    }

    .left_title {
      position: relative;
      font-size: 30rpx;

      .star {
        position: absolute;
        color: red;
        left: -15rpx;
        top: 50%;
        transform: translateY(-50%);
        font-size: 35rpx;
      }
    }

    .right_par {
      display: flex;
      color: #a0a0a0;

      .pleaseChoose {
        display: flex;
        align-items: center;
        color: #333;
      }

      .iconfont {
        color: #97a3b7;
        font-size: 38rpx;
        margin-left: 5rpx;
      }

      .showTime {
        display: flex;
        align-items: center;
        font-size: 29rpx;
        color: #333333;
      }

      .choose_icon {
        color: #8d8d8d;
        font-size: 40rpx;
      }
    }
  }

  .com {
    padding: 25rpx 10rpx;
    border-bottom: 2rpx solid #d6dbe3;
    font-size: 28rpx;
    color: #333333;

    .left_title {
      position: relative;

      .star {
        position: absolute;
        color: red;
        left: -15rpx;
        top: 50%;
        transform: translateY(-50%);
        font-size: 35rpx;
      }
    }

    .right_par {
      input {
        font-size: 28rpx;
        margin-top: 15rpx;
        color: #a0a0a0;
      }
    }
  }

  .confire {
    position: relative;
    width: 750rpx;
    display: flex;
    justify-content: space-around;
    background-color: #fff;

    .qd,
    .qx,
    .bc {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 220rpx;
      height: 90rpx;
      border-radius: 45rpx;
      background-color: #fff;
      font-size: 28rpx;
      color: #000;
    }

    .qx {
      border: 2rpx solid #dcdcdc;
    }

    .qxw {
      width: 40%;
    }

    .qd {
      background-color: #0d80d7;
      color: #fff;
      border: none;
    }

    .disable {
      background-color: #a7c0db;
    }

    .nopass {
      background-color: red;
    }
  }
}
</style>
